<template>
    <div class="banner-operation banner-space" :class="containerClass">
        <div class="swiper-container b-swiper-container">
            <swiper
                class="swiper-wrapper b-swiper-wrapper"
                :options="swiperOption"
                circular="true"
                @ready="handlerReady"
            >
                <swiper-slide
                    v-for="(item, index) in list"
                    :key="index"
                    class="b-swiper-slide"
                    :class="{ 'swiper-slide-radius': realCenterSlide }"
                >
                    <div>
                        <img
                            @click="emitClick(item, 'banner', index)"
                            class="b-opera-img"
                            :src="item.imgUrl"
                            alt=""
                            mode="widthFix"
                        />
                    </div>
                </swiper-slide>
            </swiper>
            <div class="swiper-pagination"></div>
        </div>
        <template v-if="isShowAdTag">
            <i class="ad-close-icon" @click.stop="close()"></i>
            <i class="ad-slogan-icon"></i>
        </template>
    </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';

import './swiper-bar.scss';
let key = 1;
export default {
    name: 'bannerSwiper',
    data() {
        return {
            mySwiper: null,
            containerClass: `banner-operation${key++}`
        };
    },
    computed: {
        onlyOne() {
            return this.list.length === 1;
        },
        realCenterSlide() {
            return this.centeredSlides && !this.onlyOne;
        },
        swiperOption() {
            return {
                pagination: this.onlyOne
                    ? ''
                    : {
                          el: `.${this.containerClass} .swiper-pagination` //fix 多个轮播图共用一个分页器bug
                      }, //一张的时候隐藏分页器
                watchOverflow: true,
                autoplay: {
                    disableOnInteraction: false
                }, // 可选选项，自动滑动
                loop: !this.onlyOne,
                on: {
                    init: (() => {
                        const self = this;
                        return function() {
                            const index = this.realIndex;
                            self.$emit('init', self.list[index], index);
                        };
                    })(),
                    tap: () => {
                        const index = this.mySwiper.realIndex;
                        this.$emit('click', this.list[index], index);
                    },
                    slideChange: (() => {
                        const self = this;
                        return function() {
                            const index = this.realIndex;
                            self.$emit('slideChange', self.list[index], index);
                        };
                    })()
                },
                ...(this.realCenterSlide
                    ? {
                          slidesPerView: 'auto',
                          centeredSlides: true,
                          spaceBetween: `${8 / 3.75}%`
                      }
                    : {})
            };
        }
    },
    props: {
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        centeredSlides: {
            type: Boolean,
            default: false
        },
        isHome: {
            type: Boolean,
            default: false
        },
        isShowAdTag: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        emitClick(...info) {
            this.isHome && this.$emit('jumpBannerPage', ...info);
        },
        close() {
            if (this.mySwiper) {
                this.$emit('deleteSwiperByIndex', this.mySwiper.realIndex);
            }
        },
        handlerReady(swiper) {
            this.mySwiper = swiper;
        }
    },
    components: {
        Swiper,
        SwiperSlide
    }
};
</script>
<style lang="scss" scoped>
.b-swiper-slide {
    width: 343px;
    overflow: hidden;
    &.swiper-slide-radius {
        border-radius: 6px;
    }
}
.swiper-pagination {
    bottom: 4px;
    ::v-deep.swiper-pagination-bullet {
        width: 3px;
        height: 3px;
        border-radius: 1.5px;
        background: #fff;
        transition: all 0.3s;
        opacity: 1;
        &.swiper-pagination-bullet-active {
            width: 18px;
            background: #fff;
        }
    }
}
</style>
